<template>
    <div class="qilin-QilinDialog">
        <QilinExplain title="弹窗组件" date="2023-09-21">
            <template v-slot:content>
                <el-button type="primary" @click="dialogConfig.isShow=true" style="margin-bottom:15px;">弹窗</el-button>
                <CodeMirror :codeValue="getCodeValue"></CodeMirror>
            </template>
        </QilinExplain>
    </div>
    <QilinDialog v-model:dialogConfig="dialogConfig" @handleClose="handleClose" @submitConfirm="submitConfirm"></QilinDialog>
</template>

<script setup>

/*
    数据变量定义区域
*/


/*
    计算属性等代码区域
*/
// 弹窗组件逻辑代码
const getCodeValue=computed(()=>{
    return `
        // 占位元素
        <QilinDialog v-model:dialogConfig="dialogConfig" @handleClose="handleClose" @submitConfirm="submitConfirm"></QilinDialog>

        // 关闭弹窗事件监听
        const handleClose=()=>{
            dialogConfig.isShow=false;
        };
        // 点击弹窗确认按钮事件监听
        const submitConfirm=()=>{
            console.log("点击了确认按钮");
        };
        // 弹窗配置项
        const dialogConfig=reactive({
            isShow:false,
            title:"提示"
        });

        // 配置项代码注释
        {
            isShow:false, //是否显示弹窗
            title:"提示", //弹窗标题
            top:"15vh", //margin-top值--会对拖拽造成影响
            closeOnClickModal:false, //是否可以通过点击阴影部分即modal关闭弹窗
            closeOnPressEscape:false, //是否可以通过按下ESC关闭弹窗
            modal:true, //是否需要遮罩层
            appendToBody:true, //弹窗元素自身是否插入到body元素上去
            width:"600px", //弹窗的宽度
            className:"", //弹窗的自定义类名
            center:false, //弹窗头部和底部是否水平居中
            confirmBtnText:"确定", //确认按钮的文字信息
            confirmBtnType:"primary", //确认按钮的类型
            confirmBtnSize:"default", //确认按钮的大小
            confirmBtnShow:true, //确认按钮显示与否
            closeBtnText:"取消", //取消按钮的文字信息
            closeBtnType:"default", //取消按钮的类型
            closeBtnSize:"default", //取消按钮的大小
            closeBtnShow:true, //取消按钮显示与否
            additionalButton:[ //额外按钮的相关信息配置项
                // {
                //     btnText:"额外按钮",
                //     btnType:"default",
                //     btnSize:"small",
                //     click:"click"
                // }
            ],
            isHideFooter:false //是否隐藏脚部元素
        }
    `
});


/*
    逻辑脚本代码区域
*/
// 关闭弹窗事件监听
const handleClose=()=>{
    dialogConfig.isShow=false;
};
// 点击弹窗确认按钮事件监听
const submitConfirm=()=>{
    console.log("点击了确认按钮");
};

// 弹窗配置项
const dialogConfig=reactive({
    isShow:false,
    title:"提示"
});


/*
    生命周期等代码区域
*/

</script>

<style lang="scss" scoped>
.qilin-{

}
</style>
